<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            width: 500px;
            height: 200px;
            overflow-x: auto;
            margin: 5px;
            border: none;
            background-color: greenyellow;
            white-space: nowrap;
        }
        .scrollbar{
            width: 200px;
            height: 100px;
            margin: 10px;
            display: inline-block;
            background-color: #e9337c;

        }
        .test-1::-webkit-scrollbar {/*滚动条整体样式*/
            /*width: 10px;     !*高宽分别对应横竖滚动条的尺寸*!*/
            /*height: 1px;*/
            display: none;
        }
        .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
        }
        .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        }
    </style>
</head>
<body>
<div class="test test-1">
    <div class="scrollbar"><p>1</p></div>
    <div class="scrollbar"><p>2</p></div>
    <div class="scrollbar"><p>3</p></div>
    <div class="scrollbar"><p>4</p></div>
    <div class="scrollbar"><p>5</p></div>
</div>
</body>
</html>
